﻿@model EnrollModel
@{
    ViewBag.Title = "培训报名";
}

@using (Html.BeginForm())
{
    @Html.HiddenFor(m=>m.TrainningId)
    @Html.HiddenFor(m => m.TrainningName)
    <h1>@Model.TrainningName</h1>
    <p style="text-align: center;">总名额：@Model.UserLimit 人</p>
    @Html.ValidationSummary()
    <ul>
        <li>
          <input name="Name" placeholder="姓 名" required="" id="name"/>
        </li>
        <li>
            <select name="Gender" required="" id="gender">
                <option selected="" value="1">男</option>
                <option value="2">女</option>
            </select>
        </li>
        <li>
            <input name="Age" placeholder="年 龄" type="number" min="1" required="" />
        </li>
        <li>
            <input name="IdCard" placeholder="身份证" maxlength="18" required="" />
        </li>
        <li>
            <input name="Phone" placeholder="手机号" maxlength="11" required="" type="tel" />
        </li>
        <li style="margin-top: 40px; text-align: center">
            <input type="submit" value="提 交" id="submit"/>
        </li>
    </ul>
}

@section css
{
    <style>
        body {
            background:#57A3CB
        }
         h1 {margin: 30px 0;text-align: center}
        li {
            margin: 10px 45px 10px 30px;
        }
        input, select {
            width: 100%;
            height: 40px;
            border-radius: 10px;
            font-size: 18px;
            padding-left: 10px;
            text-align: center;
        }
        .validation-summary-errors {
            color: red;
        }
        #submit {
            border: 1px solid white;
            background: transparent;
            color: white;
            margin: auto;
            width: 104%;
        }
        select {
            padding-left: 48%;
        }
        @@media (max-width: 360px) {
            input, select {
                height: 30px;
                font-size:15px;
                border-radius: 5px;
            }
        }
    </style>
}
@section scripts
{
    <script type="text/javascript">
        window.onload = function () {
            var input = document.getElementById('name');
            var width = input.offsetWidth + 'px';
            var height = input.offsetHeight + 'px';
            document.getElementById('gender').style.width = width;
            document.getElementById('gender').style.height = height;
        };
    </script>
}